<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="redmond"></sj:head>
<script type="text/javascript">
	// hide or show tab with service sub type choice
	function onPageLoad() {
		onSubTypeSelect();
		displayField(false);
		displaySecondField(false);
	}
	function onSubTypeSelect() {
		var e = document.getElementById("subType");
		var serviceID = document.getElementById("ServiceID").value;
		if (serviceID != '') {
			$('#remotetabs').tabs('enable', 5);
			$('#remotetabs').tabs('enable', 6);
		}
		var SubValue = e.options[e.selectedIndex].value;
		if (SubValue == '01') {
			$('#remotetabs').tabs('enable', 3);
			$('#remotetabs').tabs('disable', 4);

		} else if (SubValue == '02') {
			$('#remotetabs').tabs('enable', 4);
			$('#remotetabs').tabs('disable', 3);
		} else {
			$('#remotetabs').tabs('disable', 3);
			$('#remotetabs').tabs('disable', 4);
		}
	}

	// ok button then  call active service action
	function okButtonDeactive() {
		window.location = "serviceDetailsActionDeactive.action";
	}
	function cancelButtonDeactive() {
		$("#deactivedialog").dialog('close');
	};
	// call add service action
	function onClickSave() {
		window.location = "serviceDetailsActionSave.action";
	};
	function displayField(val) {
		if (val == false) {
			$("#ServiceExtendCheck").children().attr("disabled", "disabled");
			document.getElementById("ExtendYear").value = 0;
			document.getElementById("ExtendMonth").value = 0;
		} else {
			$("#ServiceExtendCheck").children().removeAttr('disabled');
		}
	}
	function displaySecondField(val) {
		if (val == false) {

			$("#ServiceTimeCheck").children().attr("disabled", "disabled");

		} else {
			$("#ServiceTimeCheck").children().removeAttr('disabled');
		}
	}
	function checkActiveService() {
		var startDate = document.getElementById("StartDate").value;
		var endDate = document.getElementById("EndDate").value;
		var extendYear = document.getElementById("ExtendYear").value;
		var extendMonth = document.getElementById("ExtendMonth").value;
		var currentDate = new Date();
		if (startDate == "" && endDate == "") {

			document.getElementById("isActive").checked = true;
			return;
		}
		if (startDate != "" && endDate == "") {
			var sDate = new Date(startDate);
			if (sDate <= currentDate) {
				document.getElementById("isActive").checked = true;
				return;
			} else {
				document.getElementById("isActive").checked = false;
				return;
			}

		}
		if (startDate == "" && endDate != "") {
			var eDate = new Date(Date.parse(endDate));
			eDate.setMonth(eDate.getMonth() + parseInt(extendMonth));
			eDate.setMonth(eDate.getMonth()+ parseInt(extendYear)*12);
			if (eDate >= currentDate) {
				document.getElementById("isActive").checked = true;
				return;
			} else {
				document.getElementById("isActive").checked = false;
				return;
			}

		}
		if (startDate != "" && endDate != "") {
			var sDate = new Date(Date.parse(startDate));
			var eDate = new Date(Date.parse(endDate));
			eDate.setMonth(eDate.getMonth() + parseInt(extendMonth));
			eDate.setMonth(eDate.getMonth()+ parseInt(extendYear)*12);
			if (eDate >= currentDate && currentDate >= sDate) {
				document.getElementById("isActive").checked = true;
				return;
			} else {
				document.getElementById("isActive").checked = false;
				return;
			}
		}

	}
</script>
</head>
<body onload="onPageLoad()">
	<s:url id="detailUrl1" action="detail1Action" />
	<s:url id="detailUrl2" action="detail2Action" />
	<s:url id="detailUrl3" action="detail3Action" />
	<s:url id="detailOrganisation" action="detailOrganisationAction" />
	<s:url id="detailContact" action="detailContactAction" />
	<s:url id="detailFunding" action="detailFundingAction" />
	<s:url id="detailPremise" action="detailPremiseAction" />

	<sj:dialog id="deactivedialog"
		buttons="{ 
    		'OK':function() { okButtonDeactive(); },
    		'Cancel':function() { cancelButtonDeactive(); } 
    		}"
		autoOpen="false" modal="true" title="Dialog with Buttons">
     Do you want to mark this Service in-active?
    </sj:dialog>
	<div class="type-button">
		<sj:submit id="formSubmit1" openDialog="deactivedialog"
			value="Deactive" button="true" />
		<sj:submit id="formSubmit2" onclick="onClickSave()" value="Save"
			indicator="indicator" button="true" />
		<sj:submit id="formSubmit3" onclick="onClickBack()" value="Back"
			indicator="indicator" button="true" />
	</div>

	<sj:tabbedpanel id="remotetabs" animate="true" collapsible="true"
		disabledTabs="[3,4,5,6]">
		<sj:tab id="tab1" target="detail1" label="Detail 1" />
		<sj:tab id="tab2" target="detail2" label="Detail 2" />
		<sj:tab id="tab3" target="detail3" label="Detail 3" />
		<sj:tab id="tabContact" target="contract" label="Contract" />
		<sj:tab id="tabFunding" target="funding" label="Funding" />
		<sj:tab id="tabPremise" href="%{detailPremise}" label="Premises" />
		<sj:tab id="tabOrganisation" href="%{detailOrganisation}"
			label="Organisation"></sj:tab>
		<div id="detail1">
			<s:form action="serviceDetailActions" id="Detail1" theme="simple">
				<table>
					<tr>
						<td>Service Name <font color="red">*</font></td>
						<td><s:textfield name="serviceName"></s:textfield> <s:hidden
								id="ServiceID" value="1"></s:hidden>
						</td>
						<td>Service Active</td>
						<td><s:checkbox name="isActive" disabled="true" id="isActive"></s:checkbox>
						</td>
					</tr>

					<tr>
						<td>Service Short Description<font color="red">*</font></td>
						<td><s:textarea name="shortDescription"></s:textarea>
						</td>
						<td>Service Full Description</td>
						<td><s:textarea name="fullDescription"></s:textarea>
						</td>
					</tr>

					<tr>
						<td>Sub Type</td>
						<td><s:select id="subType" onchange="onSubTypeSelect()"
								headerKey="03" headerValue="Choose Sub Type*"
								list="#{'01':'Contract','02':'Funding'}" name="subType"></s:select>
						</td>
						<td>Dept Code<font color="red">*</font></td>
						<td><s:textfield name="deptCode"></s:textfield>
						</td>
					</tr>

					<tr>
						<td>Lead Contact<font color="red">*</font></td>
						<td><s:textfield name="leadContact" disabled="true"></s:textfield>
							<s:a href="lookupContactAction">Lookup</s:a>
						</td>
						<td>Service Type<font color="red">*</font></td>
						<td><s:textfield name="serviceType"></s:textfield>
						</td>
					</tr>

					<tr>
						<td>Client Description</td>
						<td><s:textarea name="clientDescription"></s:textarea>
						</td>
						<td>Service Description Delivery</td>
						<td><s:textarea name="serviceDescription"></s:textarea>
						</td>
					</tr>
					<tr>
						<td>Service Attendance</td>
						<td><s:select
								list="#{'01':'January','02':'February','03':'March','04':'April'}"
								name="serviceAttendance"></s:select>
						</td>
						<td>Service Contract Code</td>
						<td><s:textfield name="serviceContractCode"></s:textfield>
						</td>
					</tr>
					<tr>
						<td>Service Start Expected</td>
						<td><sj:datepicker name="serviceStartExpected"></sj:datepicker>

						</td>

						<td>Service Contract Value</td>
						<td><s:textfield name="serviceContractValue"></s:textfield>
						</td>
					</tr>
					<tr>
						<td>Service Start</td>
						<td><sj:datepicker name="serviceStart" id="StartDate"
								onblur="checkActiveService()"></sj:datepicker></td>
						<td>Contract Staged Payment</td>
						<td><s:checkbox name="contractStaged"></s:checkbox>
						</td>
					</tr>
					<tr>
						<td>Service End Date</td>
						<td><sj:datepicker name="serviceEndDate" id="EndDate"
								onblur="checkActiveService()"></sj:datepicker></td>
						<td>Referral Process/Method</td>
						<td><s:select
								list="#{'01':'January','02':'February','03':'March','04':'April'}"
								name="referral"></s:select>
						</td>
					</tr>
					<tr>
						<td>Service Extendable</td>
						<td><s:checkbox name="serviceExtendable"
								onclick="displayField(this.checked)"></s:checkbox>
						</td>
						<td>Service Time Limited</td>
						<td><s:checkbox name="serviceLimited"
								onclick="displaySecondField(this.checked)"></s:checkbox>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<fieldset id="ServiceExtendCheck">
								<sj:spinner size="4" name="extentYear" id="ExtendYear" min="0"
									onblur="checkActiveService()"></sj:spinner>
								Years
								<sj:spinner size="4" name="extentMonth" id="ExtendMonth" min="0"
									max="12" onblur="checkActiveService()"></sj:spinner>
								Months
							</fieldset></td>
						<td></td>
						<td>
							<fieldset id="ServiceTimeCheck">
								<sj:spinner size="4" name="extentYear" min="0"></sj:spinner>
								Years
								<sj:spinner size="4" name="extentMonth" min="0" max="12"></sj:spinner>
								Months
							</fieldset></td>

					</tr>
				</table>
			</s:form>
		</div>
		<div id="detail2">
			<s:form theme="simple">
				<table>
					<tr>
						<td>Service Benefits Critetion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
						<td>Service Disability Critetion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
					</tr>
					<tr>
						<td>Service Barriers Criterion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
						<td>Service Personal Circumstants Criterion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
					</tr>
					<tr>
						<td>Service Ethnicity Criterion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
						<td>Other Service Participation Criterion</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
					</tr>
				</table>
			</s:form>

		</div>
		<div id="detail3">
			<s:form theme="simple">
				<table>
					<tr>
						<td>Client Support Process</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
						<td>Client Outcome</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
					</tr>
					<tr>
						<td>Intervention</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
						<td>Target Client</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
					</tr>
					<tr>
						<td>Client Jounrney</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
						<td>Accereditations</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
					</tr>
					<tr>
						<td>Other Services</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
						<td>Referral Sources</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
					</tr>
					<tr>
						<td>Support Centres</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset></td>
						<td>Programme</td>
						<td><s:select
								list="#{'01':'January','02':'February','03':'March','04':'April'}"
								name="programme"></s:select></td>
					</tr>
				</table>
			</s:form>

		</div>
		<div id="contract">
			<s:form theme="simple">
				<table>
					<tr>
						<td>Contact Outcome</td>
						<td>
							<fieldset>
								<s:checkbox name="1">Display</s:checkbox>
								<br>
								<s:checkbox name="2">Display</s:checkbox>
							</fieldset>
						</td>
						<td>Contact Obligation</td>
						<td>
							<fieldset>
								<s:checkbox name="3">Contact 1</s:checkbox>
								<br>
								<s:checkbox name="4">Contact 2</s:checkbox>
							</fieldset>
						</td>
					</tr>

					<tr>
						<td>Participation</td>
						<td><s:select
								list="#{'01':'January','02':'February','03':'March','04':'April'}"
								name="participation"></s:select>
						</td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</s:form>
		</div>
		<div id="funding">

			<s:form theme="simple">
				<b>General</b>
				<table>
					<tr>
						<td>Funding Source</td>
						<td><s:select
								list="#{'01':'January','02':'February','03':'March','04':'April'}"
								name="fundingSource"></s:select></td>
						<td>Funding Needs</td>
						<td><s:textfield name="fundingNeeds"></s:textfield></td>
					</tr>
					<tr>
						<td>Funding Contact Details</td>
						<td><s:textfield name="fundingContact" disabled="true"></s:textfield>
							<s:a href="lookupFundingContactAction">Lookup</s:a>
						</td>
						<td>Funding Continuation Needed</td>
						<td><s:checkbox name="fundingContinuationNeed"></s:checkbox>
						</td>
					</tr>
					<tr>
						<td>Funding Amount</td>
						<td><s:textfield name="fundingAmount"></s:textfield></td>
						<td>Funding Continuation Amount</td>
						<td><s:textfield name="fundingContinuationAmount"></s:textfield>
						</td>
					</tr>
					<tr>
						<td>Funding Start</td>
						<td><sj:datepicker name="fundingStart"></sj:datepicker></td>
						<td>Funding Continuation Details</td>
						<td><s:textarea name="fundingContinuationDetails"></s:textarea>
						</td>
					</tr>
					<tr>
						<td>Funding End</td>
						<td><sj:datepicker name="fundingEnd"></sj:datepicker></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>Fundraising For Text</td>
						<td><s:textarea name="fundraisingText"></s:textarea></td>
						<td>Fundraising Needs</td>
						<td><s:textfield name="fundraisingNeeds"></s:textfield></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td>Fundraising Required By</td>
						<td><sj:datepicker name="fundraisingRequiredBy"></sj:datepicker>
						</td>
					</tr>
					<tr>
						<td>Fundraising Why</td>
						<td><s:textarea name="fundraisingWhy"></s:textarea></td>
						<td>Fundraising Complete</td>
						<td><s:checkbox name="fundraisingComplete"></s:checkbox></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td>Fundraising Complete</td>
						<td><sj:datepicker name="fundraisingComplete"></sj:datepicker>
						</td>
					</tr>
					<tr>
						<td>Fundraising Donor Anonymous</td>
						<td><s:checkbox name="fundraisingDonorAnonymous"></s:checkbox>
						</td>
						<td>Fundraising Donation Date</td>
						<td><sj:datepicker name="fundraisingDonationDate"></sj:datepicker>
						</td>
					</tr>
					<tr>
						<td>Fundraising Donor Amount</td>
						<td><s:textfield name="fundraisingDonorAmount"></s:textfield>
						</td>
						<td>Fundraising Donation Incremetal</td>
						<td><s:checkbox name="fundraisingDonationIncremetal"></s:checkbox>
						</td>
					</tr>
				</table>
			</s:form>

		</div>
	</sj:tabbedpanel>


</body>
</html>